<template>
  <div class="login-panel">
    <h2 class="title">后台管理系统</h2>

    <el-tabs type="border-card" v-model="currentTab" stretch>
      <!-- account显示区域 -->
      <el-tab-pane name="account">
        <template #label>
          <span><user-filled class="login-tab-icon" />账号登入</span>
        </template>
        <login-panel-account ref="accountRef"></login-panel-account>
      </el-tab-pane>
      <!-- phone显示区域 -->
      <el-tab-pane name="phone">
        <template #label>
          <span> <iphone class="login-tab-icon" />手机登入</span>
        </template>
        <login-panel-phone ref="phoneRef"></login-panel-phone>
      </el-tab-pane>
    </el-tabs>

    <div class="account-control">
      <!-- 账号登录可以用的选项 -->
      <div v-if="currentTab === 'account'">
        <el-checkbox class="rememberPsw" v-model="isKeepPassword"
          >记住密码</el-checkbox
        >
        <el-link class="forgetPsw" type="primary">忘记密码</el-link>
      </div>
      <el-button class="login-btn" type="primary" @click="handleLoginClick"
        >立即登入</el-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import loginPanelAccount from './login-panel-account.vue';
import loginPanelPhone from './login-panel-phone.vue';

export default defineComponent({
  components: {
    loginPanelAccount,
    loginPanelPhone
  },
  setup() {
    const isKeepPassword = ref(true);
    const currentTab = ref<string>('account'); // 当前页面在显示哪个登录页面， 最后用户点击登入是需要哪个登入（账号还是手机登入）;
    const accountRef = ref<InstanceType<typeof loginPanelAccount>>(); // 获取账号登入这个组件
    const phoneRef = ref<InstanceType<typeof loginPanelPhone>>(); // 获取手机号登入组件

    // 开始发送真正的登入
    const handleLoginClick = () => {
      // 告诉负责验证的组件开始验证.
      if (currentTab.value === 'account') {
        // 账号登录组件
        accountRef.value?.accountLoginAction(isKeepPassword.value); // // 这里accountRef.value?加问号是因为我们定义的时候没有赋值,所以它认为这个值有可能是空的
      } else {
        // 手机登入组件
        phoneRef.value?.phoneLoginAction();
      }
    };

    return {
      isKeepPassword,
      handleLoginClick,
      accountRef,
      phoneRef,
      currentTab
    };
  }
});
</script>

<style scoped lang="less">
.login-panel {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 320px;
  text-align: center;
  .title {
    margin-bottom: 30px;
  }
  .login-tab-icon {
    width: 18px;
    margin-bottom: -3px;
  }
  .account-control {
    position: relative;
    height: 80px;
    .rememberPsw {
      float: left;
    }
    .forgetPsw {
      float: right;
      height: 20px;
      margin-top: 10px;
    }
    .login-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
}

/*< InstanceType<typeof 组件> > 的原理与用法
  每个组件创建出来都是一个对象.
  但是在给别的组件使用时都是根据这个对象的描述创建出来一个一个的实例, 实例在被使用.
  < InstanceType<typeof 组件> >就可以拿到这个组件(对象)的描述(类似类的概念), 作为类型注解,作为泛型传递.
 */

/* 如果判断自己处于哪个tab
el-tabs加上 v-model
el-tab-pane加上 name
给v-model传什么,哪个切换的就是哪个tab
  */
</style>
